<template>
  <div>
    <!-- 导航栏 -->
    <van-sticky>
      <van-nav-bar :title="$route.meta.title"></van-nav-bar>
    </van-sticky>
    <!-- 轮播图 -->
    <van-row>
      <van-swipe :autoplay="2000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </van-row>
    <!-- 九宫格式路由导航到各种奇奇怪怪的功能去 -->
    <van-row class="grid">
      <van-grid :column-num="3">
        <van-grid-item text='客服反馈' @click='unrealized' icon='question-o' />
        <van-grid-item text='失物招领' @click='unrealized' icon='medal-o' />
        <van-grid-item text='拼车' @click='unrealized' icon='location-o' />
        <van-grid-item text='爆照活动' @click='unrealized' icon='photo-o' />
        <van-grid-item text='找舍友' @click='unrealized' icon='friends-o' />
        <van-grid-item text='兼职实习' @click='unrealized' icon='refund-o' />
        <van-grid-item text='素拓' @click='unrealized' icon='gift-o' />
        <van-grid-item text='公告' @click='unrealized' icon='bullhorn-o' />
        <van-grid-item text='开发日志' @click='toGitee' icon='notes-o' />
      </van-grid>
    </van-row>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ],
    }
  },
  methods: {
    // 功能未实现提示
    unrealized() {
      this.$toast.fail('功能未实现')
    },
    toGitee() {
      window.location.replace('https://gitee.com/xu-zhihui/content-pro')
    }
  }
}
</script>

<style scoped>
/* @import url(); 引入css类 */
.van-swipe {
  width: 100vw;
  height: 25vh;
}
.van-swipe-item img {
  width: 100%;
  height: 100%;
}

.van-row {
  margin-top: 30px;
}
</style>
